@import './lib/reset.scss';

.box{
	.header{
		@include flexbox();
		@include justify-content();
		@include align-items();
		.ssk{
			@include rect(3.2rem,0.29rem);
			@include background-color(#FBACA7);
			@include flexbox();
			@include align-items();
			border-radius:0.15rem;
			.iconfont{
				@include font-size(0.22rem);
				@include text-color(#fff);
				float: left;
				margin:0 0.1rem;
			}
			.ss{
				border:0;
				float: left;
				@include background-color(#FBACA7);
				@include text-color(#fff);
				@include rect(2.5rem,0.2rem);
			}
		}
	}
	.content{
		.homekind{
			@include rect(100%,3.08rem);
			@include background-color(#fff);
			.kinds{
				@include rect(100%,0.8rem);
				@include background-color(#fff);
				@include flexbox();
				li{
					img{
						@include rect(0.75rem,auto);
					}
				}
			}
			.finalkind{
				@include rect(100%,2.28rem);
				@include background-color(#fff);
				margin-top:0.1rem;
				.fk1, .fk2{
					img{
						@include rect(1.875rem,auto);
					}
				}
			}
		}
		.homehot{
			@include rect(100%,8rem);
			@include background-color(#0ff);
			.hhtop{
				@include rect(100%,auto);
				margin-bottom:-0.01rem;
			}
			.hh1{
				@include rect(100%,3.2rem);
				@include background-color(#C72D35);
				@include flexbox();
				margin-bottom:-0.01rem;
				.hh1-1{
					@include rect(2.15rem,auto);
				}
				.h1right{
					.hh1-2{
						@include rect(1.65rem,auto);
					}
					.hh1-3{
						@include rect(1.65rem,auto);
					}
				}
			}
			.hh2{
				@include rect(100%,1.96rem);
				@include background-color(#C72D35);
				@include flexbox();
				.hh2-1{
					@include rect(1.17rem,auto);
					margin-right:-0.01rem;
				}
				.h2right{
					.h2r-top{
						.hh2-2{
							@include rect(0.85rem,auto);
							margin-right:-0.01rem;
						}
					}
					.h2r-bottom{
						.hh2-3{
							@include rect(0.85rem,0.99rem);
							margin-right:-0.01rem;
							margin-top:-0.01rem;
						}
					}
				}
			}
			.hh3{
				@include rect(100%,1.96rem);
				@include background-color(#C72D35);
				@include flexbox();
				margin-top:-0.01rem;
				.h3left{
					.h3l-top{
						.hh3-1{
							@include rect(0.85rem,auto);
							margin-left:-0.01rem;
						}
					}
					.h3l-bottom{
						.hh3-2{
							@include rect(0.85rem,0.99rem);
							margin-left:-0.01rem;
							margin-top:-0.01rem;
						}
					}
				}
				.hh3-3{
					@include rect(1.17rem,auto);
					margin-left:-0.01rem;
				}
			}
		}
		.my-list{
			@include rect(100%,auto);
			@include background-color(#f7f7f7);
			.ml-top{
				@include rect(100%,0.4rem);
				@include background-color(#fff);
				margin-top:0.15rem;
				@include flexbox();
				@include justify-content();
				@include align-items();
				span{
					@include font-size(0.16rem);
					@include text-color(#7e7e7e);
				}	
			}
			ul{
				@include rect(100%,auto);
				@include background-color(#fff);
				@include flexbox();
				flex-wrap: wrap;
				li{
					@include rect(1.7rem,3.1rem);
					@include background-color(#fff);
					margin-left:0.11rem;
					margin-bottom:0.1rem;
					img{
						@include rect(1.7rem,2.32rem);
					}
					i{
						@include font-size(0.1rem);
						@include text-color(#919191);
					}
					p{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.libottom{
						@include flexbox();
						@include justify-content(space-between);
						@include align-items();
						em{
							@include font-size(0.18rem);
						}
						strong{
							@include rect(0.4rem,0.18rem);
							@include text-color(#f8584f);
							@include border(1px 1px 1px 1px,#f8584f,solid)
							@include flexbox();
							@include justify-content();
							@include align-items();
							@include background-color(#fef0ed);
						}
					}
				}
			}
		}
	}
}
